<template>
  <div class="duck-man duck-content">
    <div class="canvas_demo">
      <star-moon />
    </div>
    <div class="animation-delay_demo">
      <animation-delay-demo />
    </div>
    <div class="animation-delay_clip">
      <animation-delay-clip />
    </div>
    <div class="single-instance">
      <single-instance />
    </div>
  </div>
  <div class="duck-man duck-content dragable">
    <!-- <div class="dragable">
      <dragable />
    </div> -->
    <div class="list" v-dragsort="handleDragend">
      <div :draggable="true" v-for="item in 5" :key="item" :class="`list-item_${item}`" class="list-item">
        {{ item }}
      </div>
      <!-- <div :draggable="true" class="list-item list-item_2">13</div>
      <div :draggable="true" class="list-item list-item_3">14</div>
      <div :draggable="true" class="list-item list-item_4">15</div>
      <div :draggable="true" class="list-item list-item_5">16</div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import StarMoon from './star_moon.vue'
  import AnimationDelayDemo from './animation_delay/animation_delay_demo.vue'
  import AnimationDelayClip from './animation_delay/animation_delay_clip.vue'
  import SingleInstance from './single_instance.vue'
  import Dragable from './component/Dragable.vue'

  const handleDragend = (value: string[]) => {
    console.log('%c [ value ]-38', 'font-size:13px; background:#357cb9; color:#79c0fd;', value)
  }

  const demoArr = [true, false, false, true, true, false]
  const endLoop = () => {
    try {
      demoArr.forEach((item) => {
        if (item) {
          throw new Error('End loop')
        }
      })
    } catch (error) {
      // error = null
    }
  }

  endLoop()
</script>

<style lang="less" scoped>
  .dragable {
    .list {
      width: 80%;
      height: 30vh;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: repeat(5, 20%);
      row-gap: 8px;
      margin-bottom: 30px;

      .list-item {
        width: 70%;
        background-color: pink;
        color: green;
        font-size: 18px;
        border-radius: 8px;
        cursor: move;
      }
      .moving {
        background: transparent;
        color: transparent;
        border: 1px dashed #ccc;
      }
    }
  }
</style>
